<template>
    <div class="uiui" style="overflow: hidden;">
     <div class="regist" style="position:absolute;width:1000px;height:600px;left:360px;top:120px;">
        <el-card class="regist-box-card" style="width:500px;">
          <div slot="header" class="clearfix">
            <span style="font-weight:bold;"><font size=3 color="#86917E">用户注册</font></span>
          </div>
        <el-form ref="ruser" :rules="rules" :model="ruser" label-width="80px">
            <el-form-item label="用户名" prop="uname">
            <el-input v-model="ruser.uname" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="upassword">
            <el-input v-model="ruser.upassword" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <!-- <el-form-item label="确认密码">
            <el-input v-model="ruser.quedingupassword" placeholder="请再次输入密码" show-password></el-input>
            </el-form-item> -->
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="ruser.gender">
                <el-radio label="0">男</el-radio>
                <el-radio label="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号"  prop="iphone">
            <el-input v-model="ruser.iphone" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="证件类型">
            <el-select v-model="ruser.typeid" placeholder="请选择证件类型" prop="region">
                <el-option v-for="(idtype,index) in idtypelist" :key="index" :label="idtype.tname" :value="idtype.tid"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="证件号码" prop="idnumber">
            <el-input v-model="ruser.idnumber" placeholder="请输入证件号码"></el-input>
            </el-form-item>
            <el-form-item label="验证">
              <div class="drag" ref="dragDiv" style="width:60%;">
                  <div class="drag_bg"></div>
                  <div class="drag_text">{{confirmWords}}</div>
                  <div ref="moveDiv" @mousedown="mousedownFn($event)" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg" style="position: absolute;top: 0px;left: 0px;"></div>
              </div>
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="submitForm('ruser')">注册</el-button>
            <el-button  @click="resetForm('ruser')">重置</el-button>
            </el-form-item>
        </el-form>
        </el-card>
       
    </div>  
      <vue-particles
        color="#dedede"
        :particleOpacity="0.7"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="4"
        linesColor="#dedede"
        :linesWidth="3"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
      >
      
      </vue-particles>
      
  </div>
</template>

<script>
import {addUser,findAllidtype} from '../../api'
    export default {
        data(){
            return {
                beginClientX:0,           /*距离屏幕左端距离*/
                mouseMoveStata:false,     /*触发拖动状态  判断*/
                maxwidth:'',               /*拖动最大宽度，依据滑块宽度算出来的*/
                confirmWords:'拖动滑块验证',   /*滑块文字*/
                confirmSuccess:false,           /*验证成功判断*/
                ruser : {},
                idtypelist : [],
                rules: {
                  uname: [
                    { required: true, message: '请输入用户名称', trigger: 'blur' },
                    { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                  ],
                  upassword: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                  ],
                  region: [
                    { required: true, message: '请选择证件类型', trigger: 'change' }
                  ],
                 gender: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                  ],
                  iphone : [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min: 11, max: 11, message: '请输入11位手机格式', trigger: 'blur' }
                  ],
                  idnumber: [
                    { required: true, message: '请输入证件号', trigger: 'blur' },
                    { min: 18, max: 18, message: '请输入18位证件号', trigger: 'blur' }
                  ]
                }
            }
            
        },
        async created() {
          let {data:baseRefaut} = await findAllidtype()
          this.idtypelist = baseRefaut.data
        },
        methods: {
            mousedownFn:function (e) {
                if(!this.confirmSuccess){
                    e.preventDefault && e.preventDefault();   //阻止文字选中等 浏览器默认事件
                    this.mouseMoveStata = true;
                    this.beginClientX = e.clientX;
                }
            },        //mousedoen 事件
            successFunction(){
                this.confirmSuccess = true
                this.confirmWords = '验证通过';
                if(window.addEventListener){
                    document.getElementsByTagName('html')[0].removeEventListener('mousemove',this.mouseMoveFn);
                    document.getElementsByTagName('html')[0].removeEventListener('mouseup',this.moseUpFn);
                }else {
                    document.getElementsByTagName('html')[0].removeEventListener('mouseup',()=>{});
                }
                document.getElementsByClassName('drag_text')[0].style.color = '#fff'
                document.getElementsByClassName('handler')[0].style.left = this.maxwidth + 'px';
                document.getElementsByClassName('drag_bg')[0].style.width = this.maxwidth + 'px';
            },                //验证成功函数
            mouseMoveFn(e){
                if(this.mouseMoveStata){
                    let width = e.clientX - this.beginClientX;
                    if(width>0 && width<=this.maxwidth){
                        document.getElementsByClassName('handler')[0].style.left = width + 'px';
                        document.getElementsByClassName('drag_bg')[0].style.width = width + 'px';
                    }else if(width>this.maxwidth){
                        this.successFunction();
                    }
                }
            },                   //mousemove事件
            moseUpFn(e){
                this.mouseMoveStata = false;
                var width = e.clientX - this.beginClientX;
                if(width<this.maxwidth){
                    document.getElementsByClassName('handler')[0].style.left = 0 + 'px';
                    document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px';
                }
            },                       //mouseup事件
            submitForm(formName) {
            this.$refs[formName].validate(async(valid) => {
              if (valid) {
                if(this.confirmSuccess){
                  //注册 添加 
                  let {data:baseRefaut} = await addUser(this.ruser)
                  this.$message.success(baseRefaut.message)
                  //跳转到主页
                  this.$router.push('/main')
                }else{
                  this.$message.error('未校验')
                }
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          },
          
          
        },
        mounted(){
            this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth;
            document.getElementsByTagName('html')[0].addEventListener('mousemove',this.mouseMoveFn);
            document.getElementsByTagName('html')[0].addEventListener('mouseup',this.moseUpFn)
        }
    }
</script>

<style scoped>
    .regist-box-card{
        width: 30%;
    }
    .regist{
        height: 100%;
        display: flex;              /* css3 新取值，允许居中 */
        align-items: center;        /* 上下居中*/
        justify-content: center;   /* 左右居中 */
    }
    .drag{
        position: relative;
        background-color: #e8e8e8;
        width: 100%;
        height: 34px;
        line-height: 34px;
        text-align: center;
    }
    .handler{
        width: 40px;
        height: 32px;
        border: 1px solid #ccc;
        cursor: move;
    }
    .handler_bg{
        background: #fff url("") no-repeat center;
    }
    .handler_ok_bg{
        background: #fff url("") no-repeat center;
    }
    .drag_bg{
        background-color: #7ac23c;
        height: 34px;
        width: 0px;
    }
    .drag_text{
        position: absolute;
        top: 0px;
        width: 100%;text-align: center;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        -o-user-select:none;
        -ms-user-select:none;
    }
    .uiui{margin:0px; background: url('../../assets/oo.png') no-repeat; background-size:100% 100%; background-attachment:fixed;}
</style>